
<template>
  <div class="app-container">
    <p style="font-size: 14px;"><b style="font-size: 20px;">车辆管理</b> 用于管理小区里的车辆信息，包括业主、家庭成员及租户的车辆</p>
    <!-- 搜索区域 -->
    <el-card class="box-card" style="margin-bottom: 20px;">
      <el-form label-width="80px" :inline="true" label-position="top">
        <el-form-item label="车辆牌照">
          <el-input v-model="queryData.license_plate" placeholder="请选择"></el-input>
        </el-form-item>
        <el-form-item label="小区名称">
          <el-select v-model="queryData.community_code" placeholder="请选择" @change="communityChange">
            <el-option v-for="item in CommunityAllList" :key="item.id" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栋数">
          <el-select v-model="queryData.building_code" placeholder="请选择">
            <el-option v-for="item in BuildingList" :key="item.id" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加时间">
          <DataSelect v-model="queryData.create_time" ref="datePick"></DataSelect>
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button style="margin-right: 10px;" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 工具区域 -->
    <el-card class="box-card">
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" style="margin-right: 5px;" @click="addRef.isShow = true">添加信息</el-button>
          <el-icon style="margin-right: 5px;">
            <RefreshRight />
          </el-icon>
          <el-icon style="margin-right: 5px;">
            <Share />
          </el-icon>
          <el-icon>
            <Tools />
          </el-icon>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table border :data="list" style="width: 100%">
        <el-table-column prop="license_plate" label="车辆牌照" width="80" />
        <el-table-column prop="name" label="车辆名称" width="80" />
        <el-table-column prop="name" label="照片" width="70">
          <template #default="{ row }">
            <imagePreview :src="row.photo" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column prop="color" label="车辆颜色" width="80" />
        <el-table-column prop="date" label="小区名称" width="117" align="center">
          <template #default="{ row }">
            {{ row.community?.name }}
          </template>
        </el-table-column>
        <el-table-column label="栋数" width="148" align="center">
          <template #default="{ row }">
            {{ row.building?.name }}
          </template>
        </el-table-column>
        <el-table-column label="车主姓名" width="114" align="center">
          <template #default="{ row }">
            {{ row.member?.name }}
          </template>
        </el-table-column>
        <el-table-column label="联系方式" width="120" align="center">
          <template #default="{ row }">
            {{ row.member?.tel }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="描述" />
        <el-table-column prop="create_time" label="添加时间">
          <template #default="{ row }">
            {{ formatTimeAll(row?.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="113" align="center">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="text">修改</el-button>
            <el-button @click="delRow(row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <br>
      <!-- 分页 -->
      <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="queryData.current"
        v-model:page-size="queryData.pageSize" layout="total, prev, pager, next" :total="total" background>
      </el-pagination>

      <!-- 新增修改 -->
      <addForm ref="addRef" @updateList="initData"></addForm>
    </el-card>
    <!-- </el-card> -->
    <p class="foot">Element UI黑马前端合肥前端欢迎您
    <p>@2023 地表最强集团</p>
    </p>
  </div>
</template>

<script setup>
import DataSelect from '@/components/Select/index.vue'
import { formatTimeAll, useCommunityAllList } from '@/hooks/hooks'
import { onMounted, reactive, ref } from 'vue';
import { vehicleListApi, delVehicleListApi, buildingListApi } from '@/api/owners'
import imagePreview from "@/components/ImageHj/index";
import { ElMessage } from "element-plus";
import addForm from './form/addForm';

// 小区名称
const CommunityAllList = useCommunityAllList()

// ===========================
// 列表功能
const queryData = reactive({
  license_plate: '',  //车牌
  current: 1,
  pageSize: 3,
  building_code: '',
  create_time: '',
  community_code: '',
})

const addRef = ref();
const datePick = ref([])
const total = ref(0)
const list = ref([])
let BuildingList = ref([])

const initData = async () => {
  let { data: { rows, count } } = await vehicleListApi(queryData)
  console.log({ data: { rows, count } });
  list.value = rows
  total.value = count
}
onMounted(() => {
  initData()
})

// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};

// --------------------------------搜索功能------
const communityChange = async (val) => {
  queryData.building_code = null
  const { data } = await buildingListApi(val)
  BuildingList.value = data
  console.log(BuildingList);
}
// 搜索
const onSearch = () => {
  queryData.current = 1;
  initData();
};
// 取消重置
const onReset = () => {
  Object.assign(queryData, {
    license_plate: '',  //车牌
    current: 1,
    pageSize: 2,
    building_code: null,
    create_time: '',
    community_code: null,
  });
  datePick.value.time = []
  initData();
};

// 修改功能
const editRow = (id) => {
  addRef.value.replyData(id);
};

// 删除功能
const delRow = async (id) => {
  await confirm('确定删除吗')
  await delVehicleListApi(id);
  ElMessage.success("删除成功");
  initData();
};

</script>

<style scoped>
.header {
  position: absolute;
  top: 15px;
  left: 80px;
  display: flex;
  align-items: center;
}

.tille {
  font-weight: 700;
  font-size: 20px;
}

.foot {
  text-align: center;
  font-size: 14px;
}
</style>
